<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理定区/调度排班</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css"
          href="../../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="../../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="../../js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css" href="../../css/default.css">
    <script type="text/javascript"
            src="../../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="../../js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript"
            src="../../js/easyui/ext/jquery.cookie.js"></script>
    <script src="../../js/easyui/locale/easyui-lang-zh_CN.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        function doAdd() {
            $('#addWindow').window("open");
        }

        function doEdit() {
            alert("修改...");
        }

        function doDelete() {
            alert("删除...");
        }

        function doSearch() {
            $('#searchWindow').window("open");
        }
        // 关联分区
        function doAssociationsSubArea() {

            var rows = $("#grid").datagrid("getSelections")

            if (rows.length == 1) {
                // 打开窗口
                $('#subAreaWindow').window('open');
                // 清空数据,避免数据重复添加
                $("#noassociationSubAreaSelect").html("")
                $("#associationSubAreaSelect").empty()
                // 查询未关联的客户
                $.post("../../subAreaAction_findSubAreasUnAssociated.action",
                    function(data) {

                        for (var i = 0; i < data.length; i++) {

                            var id = data[i].id;
                            var keyWords = data[i].keyWords;

                            $("#noassociationSubAreaSelect").append(
                                "<option value='"+id+"'>" + keyWords
                                + "</option>")
                        }
                    })

                // 获取当前被选中的定区的ID
                var id = rows[0].id
                // 查询关联到指定定区的客户
                $
                    .post(
                        "../../subAreaAction_findSubAreasAssociated2FixedArea.action",
                        "id=" + id, function(data) {
                            //
                            for (var i = 0; i < data.length; i++) {

                                var id = data[i].id;
                                var keyWords = data[i].keyWords;

                                $("#associationSubAreaSelect").append(
                                    "<option value='"+id+"'>"
                                    + keyWords + "</option>")
                            }
                        })
            } else {
                $.messager.alert("提示", "你必须也只能选择一条数据进行关联", "warning")
            }
        }

        // 关联客户
        function doAssociationsCustomer() {

            var rows = $("#grid").datagrid("getSelections")

            if (rows.length == 1) {
                // 打开窗口
                $('#customerWindow').window('open');
                // 清空数据,避免数据重复添加
                $("#noassociationSelect").html("")
                $("#associationSelect").empty()
                // 查询未关联的客户
                $.post("../../fixedAreaAction_findCustomersUnAssociated.action",
                    function(data) {

                        for (var i = 0; i < data.length; i++) {

                            var id = data[i].id;
                            var username = data[i].username;
                            var telephone = data[i].telephone;

                            $("#noassociationSelect").append(
                                "<option value='"+id+"'>" + username + "["
                                + telephone + "]</option>")
                        }
                    })

                // 获取当前被选中的定区的ID
                var id = rows[0].id
                // 查询关联到指定定区的客户
                $
                    .post(
                        "../../fixedAreaAction_findCustomersAssociated2FixedArea.action",
                        "id=" + id, function(data) {
                            //
                            for (var i = 0; i < data.length; i++) {

                                var id = data[i].id;
                                var username = data[i].username;
                                var telephone = data[i].telephone;

                                $("#associationSelect").append(
                                    "<option value='"+id+"'>"
                                    + username + "["
                                    + telephone + "]</option>")
                            }
                        })
            } else {
                $.messager.alert("提示", "你必须也只能选择一条数据进行关联", "warning")
            }
        }

        //工具栏
        var toolbar = [ {
            id : 'button-search',
            text : '查询',
            iconCls : 'icon-search',
            handler : doSearch
        }, {
            id : 'button-add',
            text : '增加',
            iconCls : 'icon-add',
            handler : doAdd
        }, {
            id : 'button-edit',
            text : '修改',
            iconCls : 'icon-edit',
            handler : doEdit
        }, {
            id : 'button-delete',
            text : '删除',
            iconCls : 'icon-cancel',
            handler : doDelete
        }, {
            id : 'button-association',
            text : '关联客户',
            iconCls : 'icon-sum',
            handler : doAssociationsCustomer
        }, {
            id : 'button-association-courier',
            text : '关联快递员',
            iconCls : 'icon-sum',
            handler : function() {
                // 判断是否已经选中了一个定区，弹出关联快递员窗口
                var rows = $("#grid").datagrid('getSelections');
                if (rows.length == 1) {
                    // 只选择了一个定区
                    // 弹出定区关联快递员 窗口
                    $("#courierWindow").window('open');
                } else {
                    // 没有选中定区，或者选择 了多个定区
                    $.messager.alert("警告", "关联快递员,只能（必须）选择一个定区", "warning");
                }
            }
        }, {
            id : 'button-association2',
            text : '关联分区',
            iconCls : 'icon-sum',
            handler : doAssociationsSubArea
        } ];
        // 定义列
        var columns = [ [ {
            field : 'id',
            title : '编号',
            width : 80,
            align : 'center',
            checkbox : true
        }, {
            field : 'fixedAreaName',
            title : '定区名称',
            width : 120,
            align : 'center'
        }, {
            field : 'fixedAreaLeader',
            title : '负责人',
            width : 120,
            align : 'center'
        }, {
            field : 'telephone',
            title : '联系电话',
            width : 120,
            align : 'center'
        }, {
            field : 'company',
            title : '所属公司',
            width : 120,
            align : 'center'
        } ] ];

        $(function() {
            // 先将body隐藏，再显示，不会出现页面刷新效果
            $("body").css({
                visibility : "visible"
            });

            // 定区数据表格
            $('#grid').datagrid({
                iconCls : 'icon-forward',
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                pageList : [ 30, 50, 100 ],
                pagination : true,
                toolbar : toolbar,
                url : "../../fixedAreaAction_pageQuery.action",
                idField : 'id',
                columns : columns,
                onDblClickRow : doDblClickRow
            });

            // 添加、修改定区
            $('#addWindow').window({
                title : '添加修改定区',
                width : 600,
                modal : true,
                shadow : true,
                closed : true,
                height : 400,
                resizable : false
            });

            // 查询定区
            $('#searchWindow').window({
                title : '查询定区',
                width : 400,
                modal : true,
                shadow : true,
                closed : true,
                height : 400,
                resizable : false
            });
            $("#btn").click(function() {
                alert("执行查询...");
            });

        });

        //双击datagrid事件
        function doDblClickRow(index,row) {

            //alert(row.id);

            $('#association_subarea').datagrid({
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                url : "../../fixedAreaAction_findSubArea.action?subareaId="+row.id,
                columns : [ [ {
                    field : 'id',
                    title : '分拣编号',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'area.province',
                    title : '省',
                    width : 120,
                    align : 'center',
                    formatter : function(data, row, index) {
                        if (row.area != null) {
                            return row.area.province;
                        }
                        return "";
                    }
                }, {
                    field : 'area.city',
                    title : '市',
                    width : 120,
                    align : 'center',
                    formatter : function(data, row, index) {
                        if (row.area != null) {
                            return row.area.city;
                        }
                        return "";
                    }
                }, {
                    field : 'area.district',
                    title : '区',
                    width : 120,
                    align : 'center',
                    formatter : function(data, row, index) {
                        if (row.area != null) {
                            return row.area.district;
                        }
                        return "";
                    }
                }, {
                    field : 'keyWords',
                    title : '关键字',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'startNum',
                    title : '起始号',
                    width : 100,
                    align : 'center'
                }, {
                    field : 'endNum',
                    title : '终止号',
                    width : 100,
                    align : 'center'
                }, {
                    field : 'single',
                    title : '单双号',
                    width : 100,
                    align : 'center',
                    formatter : function(data, row, index) {

                        if (row.single == "0") {
                            return "单双号";
                        }else if (row.single == "1") {
                            return "单号";
                        }else if (row.single == "2") {
                            return "双号";
                        }
                        return "";
                    }
                }, {
                    field : 'position',
                    title : '位置',
                    width : 260,
                    align : 'center'
                } ] ]
            });

            /* 发送请求:查询双击的定区关联的客户 */
            $('#association_customer').datagrid({
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                url : "../../fixedAreaAction_findCustomersAssociated2FixedArea.action?id="+row.id,
                columns : [ [ {
                    field : 'id',
                    title : '客户编号',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'username',
                    title : '客户名称',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'company',
                    title : '所属单位',
                    width : 120,
                    align : 'center'
                } ] ]
            });
            /* 发送请求:查询双击的定区关联的快递员 */
            $('#association_courier').datagrid({
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                url : "../../fixedAreaAction_findCourier.action?id="+row.id,
                columns : [ [ {
                    field : 'id',
                    title : '快递员工号',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'name',
                    title : '快递员姓名',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'telephone',
                    title : '快递员联系电话',
                    width : 120,
                    align : 'center'
                }
                    , {
                        field : 'type',
                        title : '快递员类型',
                        width : 120,
                        align : 'center'
                    }
                    , {
                        field : 'company',
                        title : '单位',
                        width : 120,
                        align : 'center'
                    }
                    , {
                        field : 'vehicleType',
                        title : '车辆类型',
                        width : 120,
                        align : 'center'
                    }
                    , {
                        field : 'vehicleNum',
                        title : '车牌号',
                        width : 120,
                        align : 'center'
                    }


                ] ]
            });

        }
    </script>

    <script type="text/javascript">
        function saveFixedAreaData() {
            $("#fixedAreaForm").submit()
        }
    </script>
</head>

<body class="easyui-layout" style="visibility: hidden;">
<div region="center" border="false">
    <table id="grid"></table>
</div>
<div region="south" border="false" style="height: 150px">
    <div id="tabs" fit="true" class="easyui-tabs">
        <div title="关联分区" id="subArea"
             style="width: 100%; height: 100%; overflow: hidden">
            <table id="association_subarea"></table>
        </div>
        <div title="关联客户" id="customers"
             style="width: 100%; height: 100%; overflow: hidden">
            <table id="association_customer"></table>
        </div>
        <div title="关联快递员" id="courier"
             style="width: 100%; height: 100%; overflow: hidden">
            <table id="association_courier"></table>
        </div>
    </div>
</div>

<!-- 添加 修改定区 -->
<div class="easyui-window" title="定区添加修改" id="addWindow"
     collapsible="false" minimizable="false" maximizable="false"
     style="top: 20px; left: 200px">
    <div style="height: 31px; overflow: hidden;" split="false"
         border="false">
        <div class="datagrid-toolbar">
            <a id="save" onclick="saveFixedAreaData()" icon="icon-save" href="#"
               class="easyui-linkbutton" plain="true">保存</a>
            </script>
            </div>
            </div>

            <div style="overflow: auto; padding: 5px;" border="false">
                <form id="fixedAreaForm" method="post"
            action="../../fixedAreaAction_save.action">
                <table class="table-edit" width="80%" align="center">
                <tr class="title">
                <td colspan="2">定区信息</td>
                </tr>

                <tr>
                <td>定区名称</td>
                <td>
                <input type="text" name="fixedAreaName"
            class="easyui-validatebox" required="true" />
                </td>
                </tr>
                <tr>
                <td>负责人</td>
                <td>
                <input type="text" name="fixedAreaLeader"
            class="easyui-validatebox" required="true" />
                </td>
                </tr>
                <tr>
                <td>联系电话</td>
                <td>
                <input type="text" name="telephone" class="easyui-validatebox"
            required="true" />
                </td>
                </tr>
                <tr>
                <td>所属公司</td>
                <td>
                <input type="text" name="company" class="easyui-validatebox"
            required="true" />
                </td>
                </tr>
                </table>
                </form>
                </div>
                </div>
                <!-- 查询定区 -->
                <div class="easyui-window" title="查询定区窗口" id="searchWindow"
            collapsible="false" minimizable="false" maximizable="false"
            style="top: 20px; left: 200px">
                <div style="overflow: auto; padding: 5px;" border="false">
                <form>
                <table class="table-edit" width="80%" align="center">
                <tr class="title">
                <td colspan="2">查询条件</td>
                </tr>
                <tr>
                <td>定区编码</td>
                <td>
                <input type="text" name="id" class="easyui-validatebox"
            required="true" />
                </td>
                </tr>
                <tr>
                <td>所属单位</td>
                <td>
                <input type="text" name="courier.company"
            class="easyui-validatebox" required="true" />
                </td>
                </tr>
                <tr>
                <td>分区</td>
                <td>
                <input type="text" name="subareaName" class="easyui-validatebox"
            required="true" />
                </td>
                </tr>
                <tr>
                <td colspan="2">
                <a id="btn" href="#" class="easyui-linkbutton"
            data-options="iconCls:'icon-search'">查询</a>
                </td>
                </tr>
                </table>
                </form>
                </div>
                </div>

                <!-- 关联客户窗口 -->
                <div modal="true" class="easyui-window" title="关联客户窗口"
            id="customerWindow" collapsible="false" closed="true"
            minimizable="false" maximizable="false"
            style="top: 20px; left: 200px; width: 400px; height: 300px;">
                <div style="overflow: auto; padding: 5px;" border="false">
                <form id="customerForm"
            action="../../fixedAreaAction_assignCustomers2FixedArea.action"
            method="post">
                <table class="table-edit" width="80%" align="center">
                <tr class="title">
                <td colspan="3">关联客户</td>
                </tr>
                <tr>
                <td>
                <input type="hidden" name="id" id="customerFixedAreaId" />
                <!--未关联客户的下拉列表
                multiple : 数据可以多选了
                size : 指定长度,一次可以显示多少条数据
                  -->
                <select id="noassociationSelect" multiple="multiple" size="10">

                </select>
                </td>
                <td>
                <input type="button" value="》》" id="toRight"
            onclick="move2right()">
                <br />
                <input type="button" value="《《" id="toLeft" onclick="move2left()">
                </td>
                <td>
                <!--已关联的客户的下拉列表  -->
                <select id="associationSelect" name="customerIds"
            multiple="multiple" size="10"></select>
                </td>
                </tr>
                <tr>
                <td colspan="3">
                <a id="associationBtn" href="#" class="easyui-linkbutton"
            onclick="submitAssociationCustomer()"
            data-options="iconCls:'icon-save'">关联客户</a>
                </td>
                </tr>
                </table>
                </form>
                </div>
                </div>

                <!-- 关联分区窗口 -->
                <div modal="true" class="easyui-window" title="关联分区窗口"
            id="subAreaWindow" collapsible="false" closed="true"
            minimizable="false" maximizable="false"
            style="top: 20px; left: 200px; width: 400px; height: 300px;">
                <div style="overflow: auto; padding: 5px;" border="false">
                <form id="subAreaForm"
            action="../../fixedAreaAction_assignSubArea2FixedArea.action"
            method="post">
                <table class="table-edit" width="80%" align="center">
                <tr class="title">
                <td colspan="3">关联分区</td>
                </tr>
                <tr>
                <td>
                <input type="hidden" name="id" id="subAreaFixedAreaId" />

                <select id="noassociationSubAreaSelect" multiple="multiple"
            size="10">

                </select>
                </td>
                <td>
                <input type="button" value="》》" id="toRight"
            onclick="moveSubArea2right()">
                <br />
                <input type="button" value="《《" id="toLeft"
            onclick="moveSubArea2left()">
                </td>
                <td>

                <select id="associationSubAreaSelect" name="subAreaIds"
            multiple="multiple" size="10"></select>
                </td>
                </tr>
                <tr>
                <td colspan="3">
                <a id="associationBtn" href="#" class="easyui-linkbutton"
            onclick="submitAssociationSubArea()"
            data-options="iconCls:'icon-save'">关联分区</a>
                </td>
                </tr>
                </table>
                </form>
                </div>
                </div>
                <script type="text/javascript">
                // 把左边的用户移动到右边
                function move2right() {
                    $("#associationSelect").append(
                        $("#noassociationSelect option:selected"))
                }
            // 把右边的用户移动到左边
            function move2left() {
                $("#noassociationSelect").append(
                    $("#associationSelect option:selected"))
            }
            // 提交关联客户的表单
            function submitAssociationCustomer() {
                // 为定区ID赋值
                var rows = $("#grid").datagrid("getSelections")
                $("#customerFixedAreaId").val(rows[0].id)
                // 选中右侧下拉框中所有的option
                $("#associationSelect option").attr("selected", "selected")
                //	提交表单
                $("#customerForm").submit()
            }

            // 把左边的用户移动到右边
            function moveSubArea2right() {
                $("#associationSubAreaSelect").append(
                    $("#noassociationSubAreaSelect option:selected"))
            }
            // 把右边的用户移动到左边
            function moveSubArea2left() {
                $("#noassociationSubAreaSelect").append(
                    $("#associationSubAreaSelect option:selected"))
            }
            // 提交关联客户的表单
            function submitAssociationSubArea() {
                // 为定区ID赋值
                var rows = $("#grid").datagrid("getSelections")
                $("#subAreaFixedAreaId").val(rows[0].id)
                // 选中右侧下拉框中所有的option
                $("#associationSubAreaSelect option").attr("selected", "selected")
                //	提交表单
                $("#subAreaForm").submit()
            }
            </script>

            <!-- 关联快递员窗口 -->
            <div class="easyui-window" title="关联快递员窗口" id="courierWindow"
                 modal="true" collapsible="false" closed="true" minimizable="false"
                 maximizable="false"
                 style="top: 20px; left: 200px; width: 700px; height: 300px;">
                <div style="overflow: auto; padding: 5px;" border="false">
                    <form id="courierForm"
                          action="../../fixedAreaAction_associationCourierToFixedArea.action"
                          method="post">
                        <table class="table-edit" width="80%" align="center">
                            <tr class="title">
                                <td colspan="2">关联快递员</td>
                            </tr>
                            <tr>
                                <td>选择快递员</td>
                                <td>
                                    <!-- 存放定区编号 -->
                                    <input type="hidden" name="id" id="courierFixedAreaId" />
                                    <input
                                            data-options="ditable:false, url:'../../courierAction_findAvalible2.action',valueField:'id',textField:'name'"
                                            type="text" name="courierId" class="easyui-combobox"
                                            required="true" />
                                </td>
                            </tr>
                            <tr>
                                <td>选择收派时间</td>
                                <td>
                                    <input
                                            data-options="ditable:false, url:'../../takeTime_findAll.action',valueField:'id',textField:'name'"
                                            type="text" name="takeTimeId" class="easyui-combobox"
                                            required="true" />
                                    <!-- <input type="text" name="takeTimeId" class="easyui-combobox" required="true" /> -->
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <a id="associationCourierBtn" onclick="submitCourierData()"
                                       class="easyui-linkbutton" data-options="iconCls:'icon-save'">关联快递员</a>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>

            <script type="text/javascript">
                function submitCourierData() {
                    // 获取当前选中的定区的ID
                    var rows = $("#grid").datagrid("getSelections")
                    // 为隐藏域中的id赋值
                    $("#courierFixedAreaId").val(rows[0].id)
                    // 提交表单
                    $("#courierForm").submit()
                }
            </script>

</body>

</html>